/* Layout */
import Layout from '@/layout/index.vue'

/**
 * Note: // ! 注意：子菜单仅在路由 children.length >= 1 时出现
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * // ! 和vue admin element 不一样是因为
 * redirect: 'noRedirect'          // !如果设置了'noRedirect' ，则不会在痕迹导航中重定向
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    * hidden: true                   // ! 如果设置为true，项目将不会显示在侧边栏中（默认为false）
    alwaysShow: true               // !如果设置为true，将始终显示根菜单 ( will always show the root menu).如果不设置alwaysShow，当项目有多个子路由时，它将变为嵌套模式，否则不显示根菜单
    roles: ['admin','editor']    // ! 控制页面角色（您可以设置多个角色）
    title: 'title'               // ! 侧边栏和breadcrumb中显示的名称（推荐集）
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    noCache: true                // !如果设置为 true，则不会缓存页面（默认值为 false）
    affix: true                   // !如果设置为 true，则标签将贴在标签视图中(就没有tag的close按钮，一直处在tag视图中)
    breadcrumb: false             //  !如果设置为false，则该项将隐藏在breadcrumb中（默认值为true）
    activeMenu: '/example/list'  //  ! 如果设置了路径，侧边栏将突出显示您设置的路径
  }
 */

import NotFound from '@/views/NotFound.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/NotFound.vue'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      },
      {
        path: '/vuexTest/modules2222',
        name: 'vuexModules222',
        hidden: true,
        meta: { alwaysShow: true, title: '嵌套测试1', icon: 'dashboard' },
        component: () =>
          import(/* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'),
        children: [
          {
            path: '/vuexTest/modules2222/modules3333',
            name: 'vuexModules3333',
            meta: { title: '嵌套测试2', icon: 'dashboard' },
            component: () =>
              import(
                /* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'
              )
          }
        ]
      }
    ]
  },
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    name: 'Permission',
    meta: {
      alwaysShow: true, // will always show the root menu
      title: 'Permission',
      icon: '',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page',
        component: () =>
          import(/* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'),
        name: 'PagePermission',
        meta: {
          // alwaysShow: true,
          title: 'Page Permission',
          roles: ['admin'] // or you can only set roles in sub nav
        },
        children: [
          {
            path: 'page444',
            component: () =>
              import(
                /* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'
              ),
            name: 'PagePermission444',
            meta: {
              title: 'Page Permission444',
              roles: ['admin'] // or you can only set roles in sub nav
            },
            children: [
              {
                path: 'page555',
                component: () =>
                  import(
                    /* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'
                  ),
                name: 'PagePermission555',
                meta: {
                  title: 'Page Permission555',
                  roles: ['admin'] // or you can only set roles in sub nav
                }
              }
            ]
          }
          // {
          //   path: 'page555',
          //   component: () =>
          //     import(
          //       /* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'
          //     ),
          //   name: 'PagePermission555',
          //   meta: {
          //     title: 'Page Permission555',
          //     roles: ['admin'] // or you can only set roles in sub nav
          //   }
          // }
        ]
      },
      {
        path: 'directive',
        component: () =>
          import(/* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission'
          // if do not set roles, means: this page does not require permission
        }
      }
    ]
  },
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    name: 'Permission',
    meta: {
      alwaysShow: true, // will always show the root menu
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page2',
        component: () =>
          import(/* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'),
        name: 'PagePermission2',
        meta: {
          title: 'Page Permission2',
          roles: ['admin'] // or you can only set roles in sub nav
        },
        children: [
          {
            path: 'child',
            component: () =>
              import(
                /* webpackChunkName: "vuexModules" */ '@/views/NotFound.vue'
              ),
            name: 'PagePermission2 child',
            meta: {
              title: 'Page Permission2 child',
              roles: ['admin'] // or you can only set roles in sub nav
            }
          }
        ]
      }
    ]
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404.vue'),
    meta: {
      alwaysShow: true,
      hidden: true
    }
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401.vue'),
    meta: {
      alwaysShow: true,
      hidden: true
    },

    children: [
      {
        path: '403',
        component: () => import('@/views/error-page/404.vue'),
        hidden: true
      }
    ]
  },
  {
    path: '/:path(.*)',
    name: 'NotFound',
    component: NotFound
  }
  // { path: '*', redirect: '/404', hidden: true }
]

export default routes
